<template>
	<view class="login-wrap">
		<view class="header">
			<u-icon name="arrow-leftward" color="#fff" size="36" @click="goindex"></u-icon>
		</view>
		<view class="login_con_box">
			<view class="denglu_txt_box">
				<text>登录</text>
			</view>
			<view class="login">
				<text>登录及注册</text>
			</view>
			<view class="input_box">
				<view class="phone_hao_txt">手机号</view>
				<view class="input_call_box">
					<input  type="number" v-model="mobile" placeholder="请输入手机号">
				</view>
				<view class="yzm_txt">验证码</view>
				<view class="yanzheng_box">
					<view class="ipt_yam">
						<input type="number" v-model="password" placeholder="请输入验证码">
					</view>
					<view class="hqBox" v-if="!show" @tap="getYzm">获取验证码</view>
					<view class="hqBox" v-if="show">
						<u-count-down :timestamp="timestamp" :show-days="state" :show-hours="state" :show-minutes="state"
							@end="yzmends"></u-count-down>
					</view>
				</view>
			</view>
			<view class="login-sub allbtn" @tap="subLogin">同意协议并注册</view>
			<!-- <view class="txt">
				<view class="left" @tap="goForget">忘记密码</view>
				<view class="right" @tap="goRegister">去登录</view>
			</view> -->
			<view class="agreement" @tap="agreementState">
				<view class="img">

					<image src="https://mh.qingfentool.vip/upload/image/20230517/d0ccebaa6513e00b4e0d54fa25c23695.png"
						mode="" v-if="!img_show"></image>
					<image src="https://mh.qingfentool.vip/upload/image/20230517/4ff94c82cf5699b4da8ab39de664ae27.png"
						mode="" v-if="img_show"></image>
				</view>
				<view class="txt">
					请您仔细阅读<text style="color: #FFB02E;"
						@click="goUrl('/userPage/user/agreement?type=2&id=2')">《用户协议》</text><text style="color: #FFB02E;"
						@click="goUrl('/userPage/user/agreement?type=3&id=3')">《隐私协议》</text>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
		<slider-verify :isShow="sliderVerifyFLag" @touchSliderResult="verifyResult" ref="verifyElement"></slider-verify>

	</view>
</template>

<script>
import sliderVerify from '@/components/slider-verify/slider-verify.vue';
export default {
	components: {
		sliderVerify
	},
	data() {
		return {
			yanzhengIptStatus: false,//验证框
			timestamp: 59,
			border: true,
			type: 'number',
			mobile: '',
			password: '',
			baseUrl: this.$configs.urls,
			code: '',
			show: false,
			img_show: false,
			state: false,
			showCus: false,
			txt: '获取验证码',
			invite_code: '',
			sliderVerifyFLag: false //滑块验证
		};
	},
	onLoad(option) {
		this.invite_code = option.invite_code
	},
	methods: {
		verifyResult(res) {
			this.sliderVerifyFLag = false;
			if (res) {  //校验通过
				this.yanzheng()
			}
			return false
		},
		yzmends() {
			this.show = false
		},
		goUrl(url) {
			uni.navigateTo({
				url: url
			})
		},
		agreementState() {
			this.img_show = !this.img_show
		},
		jujiao() {
			this.IptStatus = true
			this.yanzhengIptStatus = false
			this.showCus = true
		},
		yanipt() {
			this.yanzhengIptStatus = true
			this.IptStatus = false
			this.showCus = true

		},
		getYzm() {
			if (this.mobile == '') {
				this.$refs.uToast.show({
					title: '手机号码不能为空',
					duration: 400,
					type: 'default'
				})

			} else {

				this.verifyResult()
				this.sliderVerifyFLag = true;
			}


		},
		// 验证码
		yanzheng() {
			let data = {
				mobile: this.mobile,
				// type:1,
				event: "register"
			}
			this.$Request.post(this.$api.user.getYzm, data).then(res => {
				////console.log(res)
				this.show = true
				this.$refs.uToast.show({
					title: res.msg,
					duration: 1000,
					type: 'default'
				})
			});
		},
		goRegister() {
			uni.navigateTo({
				url: '/pages/user/register'
			});
		},
		goindex() {
			uni.switchTab({
				url: "/pages/index/redouble"
			})
		},
		subLogin() {
			if (!this.img_show) {
				uni.showToast({
					title: '请勾选并同意协议',
					icon: "none"
				})
				return false;
			}
			if (!this.mobile) {
				uni.showToast({
					title: '手机号码不能为空',
					icon: "none"
				})
				return false;
			}
			if (!this.password) {
				uni.showToast({
					title: '验证码不能为空',
					icon: "none"
				})
				return false;
			}
			let data = {
				mobile: this.mobile,
				captcha: this.password
			};
			// #ifdef MP-WEIXIN || APP-PLUS
			data.invite_code = this.invite_code
			this.otherLogin(data)
			// #endif


			// #ifdef H5
			let ua = navigator.userAgent.toLowerCase();
			if (ua.match(/MicroMessenger/i) == "micromessenger") {
				//微信浏览器
				this.h5Login(data);
			} else {
				this.otherLogin(data)
			}
			// #endif

		},
		otherLogin(data) {
			this.$Request.post(this.$api.user.doLogin, data).then(res => {
				uni.setStorageSync('USERINFO', res.data.access_token);
				uni.setStorageSync('id', res.data.userId);
				uni.setStorageSync('wechat_open_id', res.data.wechat_open_id);
				uni.showToast({
					title: res.msg,
					icon: 'none',
					success: res => {
						// #ifdef MP-WEIXIN
						uni.switchTab({
							url: "/pages/index/redouble"
						})
						return
						// #endif
						uni.switchTab({
							url: '/pages/index/redouble'
						});
					}
				});
			});
		},
		h5Login(data) {
			this.$Request.post(this.$api.user.weixinLogin, data).then(res => {

				uni.setStorageSync('USERINFO', res.data.access_token);
				uni.setStorageSync('id', res.data.userId);
				window.location.href = res.data.gc
			});
		},
		goForget() {
			uni.navigateTo({
				url: '/userPage/user/login/forget'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
/deep/ .u-countdown-time {
	color: #fff !important;
	width: 204rpx;
	height: 62rpx;
	border-radius: 200rpx;
	font-size: 24rpx;
	margin-left: 10rpx;
	text-align: center;
	line-height: 62rpx !important;
	// border: 1rpx solid #9E3DFF;
}

.header {
	display: flex;
	justify-content: space-between;
	padding: 40rpx;
	position: absolute;
	top: 70rpx;

	image {
		width: 25rpx;
		height: 25rpx;

	}
}

.login-wrap {

	width: 100vw;
	min-height: 100vh;
	// background: linear-gradient(180deg, #F5EDFC 0%, #FFFFFF 19%);
	background-image: url('https://mh.qingfentool.vip/upload/image/20230526/09214febe0a02a205697798ff8fe49ec.png');
	background-size: 100% 100%;
	padding-top: 230rpx;

	.login_con_box {
		.denglu_txt_box {
			margin-top: 20rpx;
			padding-left: 80rpx;
			// margin-bottom: 40rpx;
			font-size: 52rpx;
			font-weight: 900;
			color: #fff;
			line-height: 78rpx;
			letter-spacing: 2px;
		}

		.login {
			margin-top: 20rpx;
			padding-left: 80rpx;
			margin-bottom: 150rpx;

			text {
				font-size: 28rpx;
				font-weight: 400;
				color: #fff;
			}

			image {
				width: 100%;
				height: 100%;
			}
		}

		.agreement {
			width: 90%;
			margin: 0 auto;
			display: flex;
			align-items: center;
			margin-top: 10rpx;

			.img {
				display: flex;
				align-items: center;

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.txt {
				margin-bottom: 18rpx;
			}
		}

		.input_box {
			width: 80%;
			height: 300rpx;
			margin: auto;

			.phone_hao_txt {
				width: 100%;
				height: 52rpx;
				font-size: 36rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 52rpx;
				margin-bottom: 12rpx;
			}

			.input_call_box {
				width: 602rpx;
				height: 68rpx;
				margin-bottom: 18rpx;

				input {
					width: 602rpx;
					height: 68rpx;
					background: rgba(0, 0, 0, 0.2);
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					opacity: 1;
					border: 1rpx solid #FED187;
					padding-left: 18rpx;
					color: #fff;
				}
			}

			.yzm_txt {
				width: 100%;
				height: 52rpx;
				font-size: 36rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 52rpx;
				margin-bottom: 12rpx;
			}

			.yanzheng_box {
				width: 602rpx;
				height: 68rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				// background: rgba(0, 0, 0, 0.2);
				// border-radius: 8rpx 8rpx 8rpx 8rpx;
				// opacity: 1;
				// border: 1rpx solid #FED187;

				.ipt_yam {
					width: 340rpx;
					height: 68rpx;
					// background: rgba(0, 0, 0, 0.2);
					// border-radius: 8rpx 8rpx 8rpx 8rpx;
					// opacity: 1;
					// border: 1rpx solid #FED187;

					input {

						width: 340rpx;
						height: 68rpx;
						background: rgba(0, 0, 0, 0.2);
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						opacity: 1;
						border: 1rpx solid #FED187;
						padding-left: 18rpx;
						color: #FFFFFF;
					}
				}

				.hqBox {
					width: 230rpx;
					height: 62rpx;
					background: rgba(0, 0, 0, 0.1);
					border: 1rpx solid #FF9F00;
					text-align: center;
					line-height: 62rpx;
					border-radius: 60rpx 60rpx 60rpx 60rpx;
					font-size: 32rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #FFFFFF;
					/deep/.u-countdown-item{
						background-color:rgba(255,255,255,0) !important;
						// opacity: .1 !important;
					}
				}
			}
		}

		.login-sub {
			color: white;
			text-align: center;
			font-size: 36rpx;
			line-height: 88rpx;
			width: 588rpx;
			border-radius: 88rpx;
			margin: 0 auto;
			margin-top: 75rpx;
			background: rgba(0, 0, 0, 0.1);
			border: 1rpx solid #FF9F00;
		}

		.txt {
			padding-top: 23rpx;
			font-size: 28rpx;
			line-height: 40rpx;
			width: 588rpx;
			margin: 0 auto;
			display: flex;
			color: #ffffff;

			.left {
				flex: 1;
				text-align: left;
			}

			.right {
				flex: 1;
				text-align: right;
			}
		}
	}


	button {
		background: linear-gradient(180deg, #ff6000 0%, #feaa56 100%);
		margin-top: 200upx;
		border-radius: 15upx !important;
	}

	button::after {
		border: none;
		background: none;

	}

	.btn_img {
		width: 90upx;
		height: 90upx;
	}


	.fanhui {
		position: fixed;
		top: 70upx;
		left: 30upx;
	}

	.titles {
		font-size: 38upx;
		padding: 180upx 0 20upx 20upx;
		font-weight: bold;
		color: #333333;
	}

	.tit_con {
		font-size: 32upx;
		color: #666666;
		padding: 0 0 50upx 20upx;
	}





}
</style>
